<template>
	<view>
		<navbar myBackground='none'></navbar>
		<view style="position: relative;">
			<image :src="hospital.pictureUrl" mode="aspectFill"
				style="filter: blur(50rpx) brightness(0.8); display: block; width: 100%; height: 550rpx; overflow: hidden">
			</image>
			<view
				:style="'position:absolute;top:' +( navconheight+statusheight )+ 'rpx;padding-top:65rpx;overflow:hidden;width:100%;'">
				<view class="hospital-hd">
					<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="showShareModal">
						<view class="weui-cell__hd">
							<image :src="hospital.pictureUrl" mode="aspectFill"
								style="position: absolute; top: -65rpx; display: block; width: 150rpx; height: 135rpx; border-radius: 10rpx; overflow: hidden">
							</image>
						</view>
						<view class="weui-cell__bd" style="padding-left: 170rpx">
							<view style="position: absolute; top: -65rpx">
								<text
									style="font-size: 36rpx; color: #ffffff; font-weight: bold">{{ hospital.hospitalName }}</text>
							</view>
							<view>
								<text class="hosp-rank">{{ hospital.level }}</text>
								<text class="hosp-label">{{ hospital.subjectHome }}</text>
							</view>
						</view>
						<view class="weui-cell__ft weui-cell__ft_in-access"><text class="f4">转发</text></view>
					</view>
					<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" @tap="toMap">
						<view class="weui-cell__hd">
							<image src="../static/images/ic_address.png" mode="aspectFill"
								style="margin-right: 10rpx; display: block; width: 40rpx; height: 40rpx"></image>
						</view>
						<view class="weui-cell__bd">
							<view>
								<text style="font-size: 24rpx">{{ hospital.hospitalAddress }}</text>
							</view>
						</view>
						<view class="weui-cell__ft weui-cell__ft_in-access"><text class="f4">导航</text></view>
					</view>
				</view>
				<view class="hospital-bd">
					<view class="weui-cells serv-list">
						<view class="weui-cell serv-item">
							<view class="weui-cell__bd">
								<view style="padding-top: 10rpx"><text class="serv-name">在线预约您需要的陪诊员</text></view>
							</view>
							<view class="weui-cell__ft"></view>
						</view>
						<view class="weui-cell serv-item" @tap="toService" :data-svid="item.id" :data-svitem="item"
							v-for="(item, index) in escorts" :key="index">
							<view class="weui-cell__hd">
								<image class="serv-logo"
									:src="item.avatar ? item.avatar : './static/images/avatar.jpg'"
									mode="aspectFill" />
							</view>

							<view class="weui-cell__bd">
								<view>
									<text class="serv-name">{{ item.name }}</text>
								</view>
								<view class="serv-line serv-intro">{{ item.description }}</view>
								<view class="serv-line">
									<text class="serv-unit">年龄：</text>
									<text class="serv-price">{{ getAge(item.age) }}岁</text>
								</view>
							</view>

							<view class="weui-cell__ft">
								<!-- <button class="btn1m"></button> -->
							</view>
							<!-- </block> -->
						</view>
					</view>
				</view>

			</view>
		</view>
		<share :shareModal="clone_shareModal"></share>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRaw
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onBeforeMount
	} from 'vue'
	onBeforeMount(() => {
		setNavSize()
		// setStyle()
	})
	const statusheight = ref(0) //状态栏高度
	const navconheight = ref(0) //内容高度
	const setNavSize = async () => {
		const {
			system,
			statusBarHeight
		} = await uni.getSystemInfo()
		const res = await uni.getSystemInfo()
		console.log('res', res);
		statusheight.value = res.statusBarHeight * 2
		if (!uni.getSystemInfoSync().platform == "ios") {
			navconheight.value = 96
		} else {
			navconheight.value = 88
		}
	}

	const getAge = (birthDate) => {
		const today = new Date();
		const birth = new Date(birthDate);
		let age = today.getFullYear() - birth.getFullYear();
		const m = today.getMonth() - birth.getMonth();
		if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
			age--;
		}
		return age;
	};

	const app = getApp()
	const hospital = ref({})
	const escorts = ref([])
	onLoad((options) => {
		const token = uni.getStorageSync('token');
		console.log("token：", token)

		app.globalData.utils.myrequest({
			myurl: '/hospitalInfo/detail',
			header: {
				'Authorization': token,
				'Source-Platform': 'mini-program'
			},
			data: {
				hospitalId: options.hid
			},
			mysuccess: (res) => {
				console.log('医院详情页数据', res);
				hospital.value = res.data
				escorts.value = res.data.escortInfoList
			}
		})

	})
	const clone_shareModal = ref(false)
	const showShareModal = () => {
		clone_shareModal.value = true
	}
	const toMap = () => {
		const point = bMapTransQQMap(hospital.value.lng, hospital.value.lat)
		// const {qmap_key:key}=uni.getStorageSync('cfg')
		let key = 'NASBZ-3U26W-JVLRJ-YLDFI-6MSVK-KWF4Q'
		let plugin = requirePlugin('routePlan');
		//使用在腾讯位置服务申请的key
		let referer = app.globalData.name; //调用插件的app的名称
		let endPoint = JSON.stringify({ //终点
			'name': hospital.value.hospitalName,
			'latitude': point.lat,
			'longitude': point.lng
		});
		uni.navigateTo({
			url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
		});
	}
	const bMapTransQQMap = (lng, lat) => {
		let x_pi = (3.141592653589793 * 3000) / 180
		let x = lng - 0.0065
		let y = lat - 0.006
		let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
		let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
		let lngs = z * Math.cos(theta)
		let lats = z * Math.sin(theta)
		return {
			lng: lngs,
			lat: lats
		}
	}
	const toService = (e) => {
		const escortItem = e.currentTarget.dataset.svitem;
		uni.navigateTo({
			url: `/pages/escort/escort?escort=${encodeURIComponent(JSON.stringify(escortItem))}?hid=${hospital.id}`
		})
	}
</script>

<style>
	@import url('hospital.css');
</style>